<template>
  <div class="header">
    <div class="logo">logo</div>
    <el-menu
      :default-active="$router.path"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#323232"
      text-color="#fff"
      active-text-color="#10b041"
      router
    >
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/destination">目的地</el-menu-item>
      <el-menu-item index="/community">社区</el-menu-item>
      <el-menu-item index="/assistant">行程助手</el-menu-item>
      <el-submenu index="5">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
    <div class="header_right">登录</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "/",
    };
  },
  // created() {
  //   this.activeIndex = this.$router.path;
  // },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  background: #323232;
  color: #fff;

  .logo,
  .header_right {
    padding: 0 30px;
    line-height: 40px;
    cursor: pointer;
  }
  .el-menu-demo {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    .el-menu-item {
      height: 40px;
      line-height: 40px;
    }
  }

  /deep/ .el-menu--horizontal > .el-submenu .el-submenu__title {
    height: 40px !important;
    line-height: 40px;
  }

  .el-menu.el-menu--horizontal {
    border-bottom: none;
  }
}
</style>
